<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .wrap { display:flex; justify-content:center; margin-top: 12vh; }
        .card { width: 420px; }
    </style>
</head>
<body>
<div id="app" class="wrap">
    <el-card class="card" shadow="hover">
        <template #header>
            <div style="text-align:center;">用户登录</div>
        </template>
        <el-form :model="form" label-width="80">
            <el-form-item label="手机号">
                <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    </div>

<script>
const { createApp, reactive } = Vue
createApp({
    setup(){
        const form = reactive({ mobile:'', password:'' })
        const login = ()=>{
            ElementPlus.ElMessage.success('模拟登录成功')
            history.back()
        }
        return { form, login }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>


